<template>
  <div class="chartPart"></div>
</template>

<script>
import myEcharts from '@/utils/echarts/echarts-util.js'
import mixinsData from './mixins_data'
export default {
  props: {
    showTitle: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    subText: {
      type: String,
      default: ''
    },
    showLegend: {
      type: Boolean,
      default: false
    },
    isGroup: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Array,
      required: true
    },
    otherOptions: {
      type: Object,
      default: () => {}
    },
    commonStyle: {
      type: Object,
      default: () => {}
    }
  },
  mixins: [mixinsData],
  data () {
    return {
      chart: null,
      seriesData: []
    }
  },
  mounted () {
    this.$nextTick(() => {
      // this.initChart()
    })
  },
  methods: {
    initChart () {
      this.chart = this.$echarts.init(this.$el, 'macarons')
      this.chart.off()
      this.setOptions()
      let that = this
      this.chart.on('click', function (val) {
        // 相应外部点击事件
        that.$emit('pieClick', val)
      })
      window.addEventListener('resize', function () {
        that.chart.resize()
      })
    },
    setOptions () {
      this.chart.showLoading()
      let datas = {}
      // 是否为分组数据
      if (this.isGroup) {
        datas = myEcharts.EchartsDataFormate.NoGroupFormate(this.chartData)
      } else {
        datas.data = this.chartData
      }
      this.chart.hideLoading()
      // 处理公共serise参数
      if (JSON.stringify(this.commonStyle) !== '{}') {
        if (this.isGroup) {
          for (let item in datas.data) {
            datas.data[item] = Object.assign(datas.data[item], this.commonStyle)
          }
        }
      }
      const option = {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie', // 类型
            radius: '48%', // 圆的大小
            center: ['50%', '50%'], // 位置居中
            data: datas.data,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            // 引导线
            labelLine: {
              normal: {
                show: true,
                length: 2
              }
            }
          }
        ]
      }
      // 显示标题
      if (this.showTitle) {
        option.title = {
          text: this.title, // 标题
          subtext: this.subText, // 副标题
          textAlign: 'center', // 文字居中
          x: 'center' // 位置默认居中
        }
      }
      // 显示图例
      if (this.showLegend) {
        option.legend = {
          orient: 'horizontal', // 垂直：vertical； 水平 horizontal
          bottom: '5%',
          data: datas.categorys
        }
      }
      // 扩展属性
      if (JSON.stringify(this.otherOptions) !== '{}') {
        for (let item in option) {
          for (let item2 in this.otherOptions) {
            if (item === item2) {
              if (item2 === 'series') {
                for (let item3 in this.otherOptions[item2]) {
                  option[item][item3] = Object.assign(option[item][item3] ? option[item][item3] : {}, this.otherOptions[item2][item3])
                }
              } else {
                option[item] = Object.assign(option[item], this.otherOptions[item2])
              }
            }
          }
        }
      }
      this.chart.setOption(option, true)
    }
    // 动态播放
    // playItem (time = 2000) {
    //   this.chart = this.$echarts.init(this.$el, 'macarons')
    //   this.seriesData = myEcharts.EchartsDataFormate.NoGroupFormate(this.chartData)
    //   // 实现自动播放tooltip的方法
    //   var app = {
    //     currentIndex: -1
    //   }
    //   let that = this
    //   setInterval(function () {
    //     var dataLen = that.seriesData.data.length
    //     // var dataLen = 5
    //     // 取消之前高亮的图形
    //     that.chart.dispatchAction({
    //       type: 'downplay',
    //       seriesIndex: 0,
    //       dataIndex: app.currentIndex
    //     })
    //     app.currentIndex = (app.currentIndex + 1) % dataLen
    //     // 高亮当前图形
    //     that.chart.dispatchAction({
    //       type: 'highlight',
    //       seriesIndex: 0,
    //       dataIndex: app.currentIndex
    //     })
    //     // 显示 tooltip
    //     that.chart.dispatchAction({
    //       type: 'showTip',
    //       seriesIndex: 0,
    //       dataIndex: app.currentIndex
    //     })
    //   }, time)
    // }
  }
}
</script>
